<script lang="ts">
import type { TColumn } from '~comp/table';
import { useElementSize } from '@peng_kai/kit/libs/vueuse';
import { valueOfRangePickerProps } from '~comp/antd-assist';
import { presetCols } from '~/components/table';

function useTableList() {
  const [listQry, listParams] = useFilterPaginationQuery(apis.apiUserReportDaily, {
    start_time: {
      value: dayjs().subtract(30, 'day').valueOf(),
      responsive: true,
    },
    end_time: {
      value: dayjs().valueOf(),
      responsive: true,
    },
  });
  const listData = computed(() => listQry?.data?.value?.list ?? []);

  const tableColumns = computed(() => {
    const columns: TColumn[] = [
      { key: 'time', name: $t('vSWndcqBgbF9tlnzy6ZR') },
      { key: 'profit', name: '', thClass: 'text-right', tdClass: 'text-right' },
      presetCols.expansion.config,
    ];

    return columns;
  });

  return {
    listQry,
    listData,
    listParams,
    tableColumns,
  };
}
</script>

<script setup lang="ts">
const [setEle, eleBp] = useElementBreakpoint({});
const { listQry, listData, listParams, tableColumns } = useTableList();
const $table = ref();
const { width: tableWidth } = useElementSize(() => $table.value?.$el);
</script>

<template>
  <div>
    <TCard :ref="setEle">
      <template #header>
        <ARangePicker
          v-bind="valueOfRangePickerProps(listParams)"
          class="ant-cover__RangePicker-3d-gray w-full" :class="{ 'w-40': eleBp['2xl'] }"
          inputReadOnly :bordered="false" format="MM-DD"
        />
      </template>

      <TSuspenseView v-bind="buildSvPropsOfQuery(listQry)" errorClass="min-h-40" outRender>
        <TTable ref="$table" class="daily-profit-table" indexId="dateline" :columns="tableColumns" :data="listData">
          <template #profit-th>
            <ATooltip :title="$t('y97hft223e7PKieVd7X8')">
              <i class="i-ri:question-line text-4 text-sys-text-body" />
              {{ $t('iygk8Ly05wCeUYc1LrlRp') }}
            </ATooltip>
          </template>

          <template #time-td="{ row }">
            {{ $d(row.dateline, 'date') }}
          </template>

          <template #profit-td="{ row }">
            <div class="flex flex-1 justify-end text-right">
              <TAmount :value="row?.total_profit_amount" :decimals="8" symbol="$" format="pad-dec" colored="pos" iconPos="left" useNumColor />
            </div>
          </template>
          <template #expansion="{ row }">
            <div v-for="(i, k) in row.total_profit_amount_detail" :key="k" class="flex justify-between">
              <span><TCurrencyIcon class="mx-1" :symbol="i.currency" />{{ i.currency }}</span>
              <TAmount :value="i?.amount" :decimals="8" :showPos="true" format="pad-dec" colored="pos" iconPos="left" useNumColor />
            </div>
          </template>
        </TTable>
        <template #pending>
          <TSkeleton class="grid grid-cols-2 w-full gap-8">
            <TSkeleton
              v-for="i in 8" :key="i"
              type="rect"
              height="15px"
            />
          </TSkeleton>
        </template>
      </TSuspenseView>
    </TCard>
    <TPagination
      v-model:page="listParams.page" v-model:pageSize="listParams.page_size" :querier="listQry"
      class="mt-6"
    />
  </div>
</template>

<style lang="scss" scoped>
.daily-profit-table {
  :deep(.expansion-switch::after) {
    content: '';
    position: absolute;
    right: 0;
    display: block;
    height: 100%;
    width: v-bind('`${tableWidth}px`');
  }
}
</style>
